<!DOCTYPE html >
<!--引入：thymeleaf的头部前缀 -->
<html xmlns:th="http://www.thymeleaf.org">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <!-- @{} 是thymeleaf表示 需要向后端发请求-->
        <script th:src="@{/static/js/vue.js}" type="text/javascript"></script>
        <script th:src="@{/static/js/elementui.js}" type="text/javascript"></script>
        <script th:src= "@{/static/js/axios.js}" type="text/javascript"></script>
        <script th:src="@{/static/js/axios.interceptor.js}" type="text/javascript"></script>
        <link th:href="@{/static/css/elementui.css}" rel="stylesheet" type="text/css">
        <link rel="icon" href="/static/favicon.ico" type="image/x-icon">
        <link rel="shortcut icon" href="/static/favicon.ico" type="image/x-icon">
        <style>
            .grid-content {
                border-radius: 4px;
                min-height: 36px;
                display: flex;
                justify-content: center;  /* 水平居中 */
                align-items: center;      /* 垂直居中 */
                color: white;             /* 文字颜色为白色 */
            }
            .bg-purple-dark {
                background: #99a9bf;
            }

        </style>

    </head>
    <body >
        <div id="app">
            <el-container>
                <el-header>
                    <el-row>
                        <el-col :span="24"><div class="grid-content bg-purple-dark">艾瑞图书商城</div></el-col>
                    </el-row>
                </el-header>
                <el-main>
                    <!-- 第1行：提供搜索功能，注册/登录 ……-->
                    <el-row>
                        <el-col :span="12"><div style="text-align: left">
                            <el-form :inline="true" :model="queryForm" class="demo-form-inline">
                                <el-form-item label="请输入">
                                    <el-input v-model="queryForm.searchContext" placeholder="书名/作者名"></el-input>
                                </el-form-item>
                                <el-form-item>
                                    <el-button type="primary" @click="queryBysearchContext()">查询</el-button>
                                </el-form-item>
                            </el-form>
                        </div></el-col>
                        <el-col :span="12"><div style="text-align: right">
                                <span v-if="userName == null || userName == ''">
                                     <el-link>注册</el-link>
                                     <el-link :href="'/page/toLogin'">登录</el-link>
                                </span>
                                                            <span v-else>
                                    欢迎你，{{userName}}
                                </span>
                            <el-link>个人信息</el-link>
                            <el-button @click="addShoppingCar(item.id)">加入购物车</el-button>
                            <el-link :href="'/page/toShoppingCar'">我的购物车</el-link>
                            <el-link>我的订单</el-link>
                            <el-link>退出</el-link>
                        </div></el-col>
                    </el-row>
                    <!-- 第2行：使用面包屑 展示 书籍类型-->
                    <el-row>
                        <el-col :span="24"><div>
                            <el-breadcrumb separator="/">
                                <el-breadcrumb-item v-for="item in bookTypes">
                                    <!-- el-link 替代以前的 a 标签-->
                                    <!-- value 指：书籍类型的ID -->
                                    <el-link :href="'/page/toBookList?typeId='+item.value"> {{item.label}} </el-link>
                                </el-breadcrumb-item>
                            </el-breadcrumb>
                        </div></el-col>
                    </el-row>
            <!-- 第3行：主编推荐-->
            <el-row>
                <el-col :span="24"><div>
                    <p style="font-size: 30px;color: green;font-family: 仿宋;font-weight: bold">主编推荐</p>
                </div></el-col>
            </el-row>
            <!-- 第4行：显示 推荐的具体书籍-->
            <el-row>
                        <el-col :span="24">
                            <div v-for="item in booklist" style="float: left;margin-right: 80px ">
                                <div>
                                    <el-image
                                            style="width: 150px; height: 200px"
                                            :src="item.imgsrc"
                                    ></el-image>
                                </div>
                                <div>
                                    <p>书名：<span v-text="item.name"></span></p>
                                    <p>单价：<span v-text="item.price"></span></p>

                                    <!-- 添加：查看详细，加入购物车 按钮-->
                                    <el-link type="success" style="margin-right: 20px" :href="'/page/toBookDetail?bookId='+item.id">查看详细</el-link>
                                    <el-button @click="addShoppingCar(item.id)">加入购物车</el-button>
                                </div>
                            </div>
                        </el-col>
                    </el-row>
        </div>
    </body>
    <script>
        let app = new Vue({
            el:"#app",
            data(){
                return {
                    queryForm:{
                        searchContext : ""
                    },
                    bookTypes:[],
                    booklist:[],
                    userName:""
                }
            },
            methods:{
                addShoppingCar(id){
                    let params = new URLSearchParams();
                    params.append("bookId",id);
                    axios.post('/shopping/addShoppingCar',params)
                        .then((res)=> {
                            if(res.data.code == 200){
                                this.$message.success("加入购物车成功！");
                            }else{
                                this.$message.error(res.data.msg);
                            }
                        })
                        .catch((error)=> {
                            console.log(error);
                        });
                },
                queryBysearchContext(){
                    console.log(this.queryForm.searchContext)
                },
                loadBookTypesDatas(){
                    //使用Axios向后端发送HTTP请求，获得所有的 书籍类型
                    axios.get('/bookType/query')
                        .then((res)=> {
                            if(res.data.code == 200){
                                this.bookTypes = res.data.datas;
                            }else{
                                this.$message.error(res.data.msg);
                            }
                        })
                        .catch((error)=> {
                            console.log(error);
                        });
                },
                loadBookListToTop10(){
                    //使用Axios向后端发送HTTP请求，获得所有的 排名前10的书籍
                    axios.get('/book/top10')
                        .then((res)=> {
                            if(res.data.code == 200){
                                this.booklist = res.data.datas;
                            }else{
                                this.$message.error(res.data.msg);
                            }
                        })
                        .catch((error)=> {
                            console.log(error);
                        });
                }
            },
            created(){
                //从后端加载所有的：书籍类型
                this.loadBookTypesDatas();
                //从后端加载：收藏量排名前10的书籍
                this.loadBookListToTop10();
                this.userName=localStorage.getItem("userName")
            }
        });
    </script>
</html>